<script setup lang="ts">
defineProps<{
  type?: 'primary' | 'secondary' | 'text'
  size?: 'small' | 'medium' | 'large'
}>()
</script>

<template>
  <button
    class="base-button"
    :class="[
      `button-${type || 'primary'}`,
      `size-${size || 'medium'}`
    ]"
  >
    <slot></slot>
  </button>
</template>

<style scoped lang="scss">
.base-button {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
  
  &.button-primary {
    background: var(--primary-color);
    color: white;
    
    &:hover {
      opacity: 0.9;
    }
  }
  
  &.size-medium {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
}
</style>